<template>
  <div class="app-common-table">
    <!-- 标题栏 -->
    <p v-if="title">
      {{ title }}
      <!-- <span class="show-more" v-if="tablePage.pageSize === 5 && tablePage.total > 5" @click="showMore = true;tablePage.pageSize = 10">更多 ></span> -->
    </p>
    <!-- 表格数据展示 -->
    <!-- 非标准数据结构渲染 -->
    <el-table
      v-if="!isStandardData"
      v-loading="loading"
      border
      :data="tableData">
      <el-table-column
        v-for="(item, index) in tableHead"
        :key="index"
        :prop="index+''"
        :label="item"
      />
    </el-table>
    <!-- 标准数据结构渲染 -->
    <el-table
      v-else
      v-loading="loading"
      border
      :data="Array.isArray(tableData) ? tableData : [tableData]">
      <el-table-column
        v-for="(item, index) in tableHead"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      />
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      v-if="showMore"
      :current-page="tablePage.currentPage"
      :page-sizes="[5, 10, 50]"
      :page-size="tablePage.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tablePage.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import commonMixin from '@/mixins/common'

export default {
  mixins: [ commonMixin ],
  props: {
    // 表格上方的标题
    title: {
      type: String,
      default: null
    },
    // 搜索条件
    searchParams: {
      type: Object,
      default: () => {
        return {
          dayweekmonth: '', // 日月年 0 1 2
          endTime: '', // 结束时间 2019-8-16
          startTime: '' // 开始时间 2019-8-14
        }
      }
    },
    // 表头以及对应字段
    tableHead: {
      type: Array,
      default: () => []
    },
    /** 是否标准数据结构
     * 标准数据结构：[{a:1,b:2,c:3},{a:666,b:888,c:999}]
     * 目前的非标准结构：[[xx,xx,xx],[xx,xxx,xx]]
     */
    isStandardData: {
      type: Boolean,
      default: false
    },
    setTotal: {
      type: Function,
      default: (res, tar) => {
        tar.tablePage.total = res.totalCounts || 0
      }
    },
    // 请求地址
    url: {
      type: String,
      default: null,
      required: true
    },
    httpType: {
      type: String,
      default: 'post'
    }
  },
  data () {
    return {
      // 表格数据
      tableData: [],
      // 分页
      tablePage: {
        currentPage: 1,
        pageSize: 5,
        total: 0
      },
      loading: true,
      showMore: true
    }
  },
  created () {
    this.handleSearch()
  },
  methods: {
    handleSearch () {
      this.tableData = []
      // this.tablePage.total = 0
      this.loading = true
      let params = Object.assign({
        currentPage: this.tablePage.currentPage,
        pageSize: this.tablePage.pageSize
      }, this.searchParams, {
        page: this.tablePage.currentPage,
        limit: this.tablePage.pageSize
      })
      if (this.httpType === 'get') params = { params }
      let apiUrl = this.url
      const isMike = !apiUrl.includes('/devices/')
      if (apiUrl.startsWith('/')) apiUrl = apiUrl.slice(1)
      apiUrl = this.getApiUrl(apiUrl, isMike)
      if (isMike) {
        delete params.page
        delete params.limit
      }
      this.$http[this.httpType](apiUrl, params).then(({ data: res }) => {
        this.loading = false
        this.tableData = res.data
        /* if (this.isStandardData) {
          this.tablePage.total = res.totalCounts || ''
        } else {
          // this.tablePage.total = res.data[0] ? res.data[0][2] : ''
          this.setTotal(res, this)
        } */
        this.setTotal(res, this)
        this.$emit('getData', res.data)
      }).catch(() => {
        this.loading = false
      })
    },
    // 分页组件控制
    handleSizeChange (val) {
      this.tablePage.pageSize = val
      this.handleSearch()
    },
    handleCurrentChange (val) {
      this.tablePage.currentPage = val
      this.handleSearch()
    }
  }
  /* watch: {
    searchParams: {
      handler (data) {
        this.handleSearch()
      },
      deep: true,
      immediate: true
    }
  } */
}
</script>

<style lang="scss">
.app-common-table {
  padding-top: 20px;
  p {
    line-height: 2;
    font-weight: bold;
    font-size: 20px;
    span.show-more {
      float: right;
      color: blue;
      cursor: pointer;
    }
  }
}
</style>
